<template>
  <div class="classify">
    <div class="top">
      <div class="top-one">
        <img src="../images/leftjiantou.png" alt="" @click="backbtn"/>
      </div>
      <div class="top-two">
        <input type="text" placeholder="九阳榨汁机" @click="tiaozhuan" />
        <img src="../images/sousuo.png" alt="" />
      </div>
    </div>
    <div class="mid">
      <div class="mid-left2">
        <div class="mid-left1">
          <div class="mid-left" @touchmove="shubiao" @touchstart="touchstart">
            <div
              v-for="item in list"
              :key="item.id"
              @click="qiehuan(item)"
              :class="{ active: compon == item.name }"
              :style="{ transform: `translateY(${-i}px)` }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="mid-right">
        
        <div class="mid-right-one">
          <a
            href="https://wqs.jd.com/wxsq_project/portal/top-list/hot.html?ptag=137886.4.1"
            class="a"
          >
            <div class="paihangbang" v-show="seen">
              <i class="rank-icon"></i>
              <span class="paihangbang-span">排行榜</span>

              <i class="right-arrow"></i>
            </div>
          </a>

          <div v-for="item in list1" :key="item.id" class="right-main">
            <div class="right-main-title">{{ item.name }}</div>

            <div class="right-main-body">
              <div
                v-for="itemlist in item.list"
                :key="itemlist.id"
                class="right-main-body-box"
              >
                <a :href="itemlist.url">
                  <img
                    :src="itemlist.image"
                    alt=""
                    class="right-main-body-img"
                    
                  />
                  <div class="right-main-body-div">{{ itemlist.name }}</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "./Footer.vue";
export default {
  components: {
    Footer,
  },
  data() {
    return {
      tabPosition: "left",
      compon: "热门推荐",
      list: [],
      list1: [],
      nameid: "right",
      list2: [],
      i: 0,
      startY: 0,
      timer: null,
      seen: true,
      timer1: null,
    };
  },

  created() {
     window.parent.scrollTo(0, 0)
    this.getlist();
  },
  watch: {
    i() {
      if (this.i < 0) {
        this.i = 0;
      }
    },
  },
  methods: {
    backbtn(){
 this.$router.back()
    },
    tiaozhuan(){
       this.$router.push({
        path: "/search",
       
      });
    },
    xiangqing(item) {
      this.$router.push({
        path: "/xiangqing",
        query: {
          id: item.id,
          name: item.name,
        },
      });
    },
 
    qiehuan(item) {
      
      this.nameid = "right";
      this.nameid = this.nameid + item.id;
      this.compon = item.name;
      if (item.id == 1) {
        this.seen = true;
      } else {
        this.seen = false;
      }
      for (let key in this.list2) {
        if (key == this.nameid) {
          this.list1 = this.list2[key];
        }
      }

      var a = (item.id - 1) * 46;
      if (a > 460) {
        a = 460;
      }
      var b = a - this.i;
      var c = b / 10;
   
      let that = this;

      if (!this.timer) {
        this.timer = setInterval(function () {
          if (b > 0) {
            b -= c;
            b = b.toFixed(1);
            that.i += c;
      
          } else {
            clearInterval(that.timer);
            that.timer = null;
          }
        }, 17);
      }
    },
    touchstart(event) {
      this.startY = event.changedTouches[0].pageY;
    },
    shubiao(event) {
     
      var moveEndY = event.changedTouches[0].pageY;
      var Y = moveEndY - this.startY;
      this.startY = moveEndY;
    
      if (Y > 0) {
     
        if (this.i >= 0) {
          this.i -= Y;
        }
      }

    },

    getlist() {
      let that = this;
      this.axios.get("./data/index.json").then(function (response) {
        that.list = response.data.Classify.left;
        that.list2 = response.data.Classify;
        that.list1 = response.data.Classify.right1;
      });
    },
  },
};
</script>

<style scoped>
a:visited {
  text-decoration: none;
}
a {
  text-decoration: none;
}
.a {
  height: 14px;
  color: rgb(132, 134, 137);
  cursor: pointer;
  text-decoration: none;
}
.classify {
  position: relative;
}
.top {
  height: 2.8rem;
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 1rem;
  text-decoration: none;
  color: #252525;
  overflow: hidden;
  border-bottom: solid 0.03125rem rgb(229, 229, 229);
 
  background-color: rgb(255, 255, 255);
  z-index: 999;
}
.top-one {
  width: 2.5rem;
  height: 2.8rem;
}
.top-one img {
  margin: 0.75rem 0 0 0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.top-two {
  width: 16.875rem;
  height: 2.75rem;
  margin-right: 0.625rem;
  overflow: hidden;
  position: relative;
}
.top-two input {
  width: 11.75rem;
  border: none;
  background: #f7f7f7;
  border-radius: 0.9375rem;
  overflow: hidden;
  height: 1.875rem;
  margin-bottom: 0.4375rem;
  padding-left: 2.5rem;
  padding-right: 0.625rem;
  font-size: 0.75rem;
  position: absolute;
  top: 0.4375rem;
  left: 0;
  line-height: 1.875rem;
  outline: none;
}
.top-two img {
  height: 1.125rem;
  width: 1.125rem;
  z-index: 1;
  position: absolute;
  left: 0.9375rem;
  top: 0.8125rem;
}
.mid {
  display: flex;
  position: absolute;
  top: 2.8625rem;
}

.mid-left1::-webkit-scrollbar {
  display: none;
}

.mid-left2 {
  height: 31.625rem;

  min-height: 100%;
  background-color: rgb(248, 248, 248);
}
.mid-left1 {
  overflow-y: auto;
  overflow-x: hidden;
  width: 5.3125rem;
  height: 31.625rem;
  position: relative;
  background-color: rgb(248, 248, 248);
  border-bottom: none;
}
.mid-left {
  width: 5.3125rem;
  height: 28.75rem;

  background-color: rgb(248, 248, 248);
  position: absolute;
}

.mid-left::after {
  content: "";
  height: 1px;

  position: absolute;
  left: 0;
  top: auto;
  right: auto;
  bottom: 0;

  border: 0 solid transparent;
}
.mid-left div {
  font-size: 0.875rem;
  display: block;
  width: 100%;
  height: 2.875rem;
  line-height: 2.875rem;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgb(248, 248, 248);
}
.mid-right {
  height: 29.375rem;
  overflow: auto;
  width: 14.6875rem;
}
.active {
  color: red;
  background-color: rgb(255, 255, 255) !important;
  width: 5.21875rem !important ;
  border-right: .03125rem solid rgb(248, 248, 248);
}
.mid-right {
  padding-bottom: .625rem;
  font-size: .75rem;
  color: #252525;
  background-color: white;
  width: 14.6875rem;
  overflow-x: hidden;
}
.mid-right-one {
  margin: 1.1875rem .4375rem 0;
  background: #fff;
  min-width: 20rem;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
.rank-icon {
  background: url()
    no-repeat;
  background-size: .75rem .75rem;
  display: block;
  line-height: 0;
  width: .75rem;
  height: .75rem;
  margin-top: .0625rem;
}
.right-arrow {
  background: url()
    no-repeat;
  background-size: .75rem .75rem;
  position: relative;
  top: .0625rem;
  width: .75rem;
  height: .75rem;
  display: block;
  line-height: 0;
  margin-left: .25rem;
  margin-top: .0625rem;
}
.paihangbang {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 4.25rem;
  height: .875rem;
  line-height: .875rem;
  text-align: center;
  cursor: pointer;
  font-size: .75rem;
  position: absolute;
  left: 10rem;
  top: 1.25rem;
}
.paihangbang-span {
  width: 2.25rem;
  margin-left: .25rem;
}
.right-main {
  padding: .4375rem .625rem 0;
  margin: 1.5625rem 0 0;
  position: relative;
}
.right-main-title {
  font-size: .875rem;
  color: #333;
  font-weight: 700;
  width: 3.5rem;
  height: .875rem;
  line-height: .875rem;
  position: absolute;
  top: -0.3125rem;
}
.right-main-body {
  background-color: #fff;
  color: #252525;
  margin-top: .5625rem;
  width: 13.75rem !important;
  padding: .4375rem .625rem 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.right-main-body-box {
  width: 33.3%;
}
.right-main-body-img {
  width: 3.75rem;
  height: 3.75rem;
  vertical-align: middle;
}
.right-main-body-div {
  color: #333;
  height: 2.1875rem;
  margin-top: .125rem;
  font-size: .75rem;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: center;
  width: 3.75rem;
}
</style>
